<template>
  <!-- Vue3语法快速掌握 -->
  <div @click="add()">
      {{count}} - {{doubleCount}}
  </div>
</template>

<script>
import { ref,onMounted,onUpdated,computed,watch } from 'vue'
  export default {
    setup(props,context){
      let count = ref(3)
      
      const add = () =>{
        console.log('add',count.value)
        count.value++;
      }
      onMounted(()=>{
        console.log('mounted...')
      })
      onUpdated(()=>{
        console.log('updated...')
      })
      watch(count,(oldCount,newCount)=>{
        console.log(oldCount,newCount)
      })
      const doubleCount = computed(()=>{
        console.log(count.value)
        return count.value * 2;
      })
      return {
        count,
        add,
        doubleCount
      }
    }
  }
</script>

<style scoped>
a {
  color: #42b983;
}
</style>
